<template>
  <div class="classification-and-statistics-of-ai-alarms">
    <div class="tab">
      <div class="tab-group">
        <template v-for="(item, index) in tabList" :key="index">
          <div
            :class="['tab-item', currentActiveIndex == index ? 'active' : '']"
            @click="changeTab(item, index)"
          >
            {{ item.title }}
          </div>
        </template>
      </div>
    </div>
    <div class="chart-container">
      <base-echart
        :show-no-data="true"
        :options="state.AITypeStatistics"
        height="230"
      ></base-echart>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted, onUnmounted } from "vue";
import { AITypeStatistics } from "./config";
import { NewGeneral } from "@/api/screen/equipment";
import { useIds } from "@/stores/screen/ids";
import pLimit from "p-limit";
import emits from "@/utils/emits";
const { getsessionStorage } = useIds();
const state = reactive<any>({ AITypeStatistics });
const tabList = [
  {
    title: "今日",
    code: "AI_EVENT_MESSAGE_DETAIL_TODAY_FOR_STATUS",
    class: "today",
  },
  {
    title: "本周",
    code: "AI_EVENT_MESSAGE_DETAIL_WEEK_FOR_STATUS",
    class: "nowWeek",
  },
  {
    title: "本月",
    code: "AI_EVENT_MESSAGE_DETAIL_MONTH_FOR_STATUS",
    class: "nowMonth",
  },
];
const currentActiveIndex = ref(0);
const changeTab = (item: object, index: number) => {
  currentActiveIndex.value = index;
  initData();
};
const getCurrentPagesUnhandle = async () => {
  // 0-未处理、1-已处理
  let config = [
    {
      code: tabList[currentActiveIndex.value].code,
      key: `${tabList[currentActiveIndex.value].code}_UNINFO`,
      params: {
        equipmentIds: getsessionStorage(),
        handleStatus: 0,
        alertGrade: "INFO",
      },
    },
    {
      code: tabList[currentActiveIndex.value].code,
      key: `${tabList[currentActiveIndex.value].code}_UNWARN`,
      params: {
        equipmentIds: getsessionStorage(),
        handleStatus: 0,
        alertGrade: "WARN",
      },
    },
    {
      code: tabList[currentActiveIndex.value].code,
      key: `${tabList[currentActiveIndex.value].code}_UNERROR`,
      params: {
        equipmentIds: getsessionStorage(),
        handleStatus: 0,
        alertGrade: "ERROR",
      },
    },
  ];
  let res = (await NewGeneral(config)) as any;
  if (res.code == 200) {
    if (Object.keys(res.data).length === 0) {
      return;
    }
    let arr = new Array(config.length);
    for (let key in res.data) {
      if (key.includes("UNINFO")) {
        arr[0] = res.data[key].data;
      } else if (key.includes("UNWARN")) {
        arr[1] = res.data[key].data;
      } else if (key.includes("UNERROR")) {
        arr[2] = res.data[key].data;
      }
    }
    state.AITypeStatistics.series[1].data = arr;
  }
};
const getCurrentPageshandle = async () => {
  // 0-未处理、1-已处理
  let config = [
    {
      code: tabList[currentActiveIndex.value].code,
      key: `${tabList[currentActiveIndex.value].code}_INFO`,
      params: {
        equipmentIds: getsessionStorage(),
        handleStatus: 1,
        alertGrade: "INFO",
      },
    },
    {
      code: tabList[currentActiveIndex.value].code,
      key: `${tabList[currentActiveIndex.value].code}_WARN`,
      params: {
        equipmentIds: getsessionStorage(),
        handleStatus: 1,
        alertGrade: "WARN",
      },
    },
    {
      code: tabList[currentActiveIndex.value].code,
      key: `${tabList[currentActiveIndex.value].code}_ERROR`,
      params: {
        equipmentIds: getsessionStorage(),
        handleStatus: 1,
        alertGrade: "ERROR",
      },
    },
  ];

  let res = (await NewGeneral(config)) as any;
  if (res.code == 200) {
    if (Object.keys(res.data).length === 0) {
      return;
    }
    let arr = new Array(config.length);
    for (let key in res.data) {
      if (key.includes("INFO")) {
        arr[0] = res.data[key].data;
      } else if (key.includes("WARN")) {
        arr[1] = res.data[key].data;
      } else if (key.includes("ERROR")) {
        arr[2] = res.data[key].data;
      }
    }
    state.AITypeStatistics.series[0].data = arr;
  }
};
const initData = () => {
  //并发
  const limit = pLimit(1);
  //获取 首页3个统计数据
  const input = [
    limit(() => getCurrentPagesUnhandle()),
    limit(() => getCurrentPageshandle()),
  ];
  Promise.all(input);
};

// 创建一个轮询器
const PollingTimer = ref(null);
const PollingFunction = () => {
  if (PollingTimer.value) {
    clearInterval(PollingTimer.value);
  }
  PollingTimer.value = setInterval(() => {
    initData();
  }, 30000);
};

onMounted(() => {
  initData();
  PollingFunction();
  emits.on("HANDLE_MESSAGE", initData);
});
onUnmounted(() => {
  emits.off("HANDLE_MESSAGE", initData);
  if (PollingTimer.value) {
    clearInterval(PollingTimer.value);
  }
});
</script>
<style lang="scss" scoped>
.classification-and-statistics-of-ai-alarms {
  width: 100%;
  height: 100%;
  padding: 5px;
  padding-bottom: 0;
  box-sizing: border-box;
  position: relative;
  // 溢出
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }

  .tab {
    position: absolute;
    top: 5%;
    width: 100%;
    height: clamp(1.563rem, 1.3vw, 3.125rem);
    z-index: 2;

    .tab-group {
      width: 100%;
      height: 100%;
      display: flex;

      .tab-item {
        width: clamp(2.5rem, 2.08vw, 5rem);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(136, 136, 136, 1);
        font-size: clamp(0.875rem, 0.73vw, 1.75rem);
        // font-size: renderClamp(14, 28);
        border: 1px solid rgba(136, 136, 136, 1);
        background-color: rgba(51, 51, 51, 0.6);
        cursor: pointer;

        &:nth-child(1) {
          border-radius: 4px 0 0 4px;
        }

        &:nth-child(2) {
          border-left: 0;
          border-right: 0;
        }

        &:nth-child(3) {
          border-radius: 0 4px 4px 0;
        }

        &.active {
          border-color: rgba(15, 148, 250, 1);
          color: rgba(15, 148, 250, 1);
          background-color: rgba(5, 45, 77, 0.6);
          position: relative;

          &:nth-child(2)::after {
            content: "";
            position: absolute;
            width: 1px;
            height: 100%;
            background-color: rgba(15, 148, 250, 1);
            left: -1px;
            top: 0;
          }

          &:nth-child(2)::before {
            content: "";
            position: absolute;
            width: 1px;
            height: 100%;
            background-color: rgba(15, 148, 250, 1);
            right: -1px;
            top: 0;
          }
        }
      }
    }
  }

  .chart-container {
    width: 100%;
    height: 100%;
  }
}
</style>
